<template>
  <div class="box">
    <div class="f1">
      <div class="f1_content">
        <div class="goHome" @click="goHome">
          <img src="@/assets/flow/首页.png" alt="" />返回主页
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="item.num">
            <h6>
              <span>{{ item.num }} </span>{{ item.str }}
            </h6>
            <template
              v-if="
                item.num == '01' ||
                item.num == '02' ||
                item.num == '03' ||
                item.num == '04'
              "
            >
              <img class="quan" src="@/assets/home/组75.png" alt="" />
              <img class="line" src="@/assets/home/组73.png" alt="" />
            </template>
            <template v-else>
              <template v-if="item.num == '05'">
                <img class="quan" src="@/assets/home/组71.png" alt="" />
                <img class="line" src="@/assets/home/组72.png" alt="" />
              </template>
              <template v-else>
                <img class="quan" src="@/assets/home/组71-2.png" alt="" />
                <img
                  class="line"
                  v-show="index !== list.length - 1"
                  src="@/assets/home/组74.png"
                  alt=""
                />
              </template>
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="f2">
      <div class="content">
        <div class="title">
          <h6></h6>
          税务信息采集
        </div>
        <div class="f2_content">
          <div class="f2_form">
            <el-form :model="form" label-width="150px" :rules="rules">
              <el-form-item label="纳税人识别号" prop="a">
                <el-input disabled v-model="form.a"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="b">
                <el-input disabled v-model="form.b"></el-input>
              </el-form-item>
              <el-form-item label="税局账号" prop="c">
                <el-input v-model="form.c"></el-input>
              </el-form-item>
              <el-form-item label="办税人选择" prop="d">
                <!-- <el-input v-model="form.d"></el-input> -->
                <el-select v-model="form.d" placeholder="">
                  <el-option label="财务负责人" value="财务负责人"> </el-option>
                  <el-option label="法定代表人" value="法定代表人"> </el-option>
                  <el-option label="办税人" value="办税人"> </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="税局密码" prop="e">
                <el-input :type="password" v-model="form.e"></el-input>
                <p class="show" @click="isShow">
                  <img v-if="show" src="@/assets/flow/yc@2x.png" alt="" />
                  <img v-else src="@/assets/flow/xs@2x.png" alt="" />
                </p>
              </el-form-item>
              <p class="forget">忘记密码?</p>
            </el-form>
          </div>
        </div>
        <!-- 服务协议 -->
        <!-- <div class="agreement">
          <img
            @click="submitBtn()"
            :src="require(`@/assets/home/组${radio ? '89' : '90'}.png`)"
            alt=""
          />
          <span> 阅读并同意 </span>
          <a @click="submitBtn()">《授权协议》</a>
        </div> -->
        <div class="btn">
          <button class="last" @click="lastStep">上一步</button>
          <button class="next" :disabled="isLock" @click="nextStep">
            确认授权
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, smsSend } from "@/utils";
export default {
  data() {
    return {
      list: [
        {
          num: "01",
          str: "基本信息",
        },
        {
          num: "02",
          str: "资质信息",
        },
        {
          num: "03",
          str: "财务信息",
        },
        {
          num: "04",
          str: "信用信息",
        },
        {
          num: "05",
          str: "授权信息采集",
        },
        {
          num: "06",
          str: "预览并提交",
        },
      ],
      radio: false,
      password: "password",
      show: true,
      isLock: false,
      disabled: false,
      btn: false,
      taxidnum: "", // 纳税人识别号
      entname: "", //企业名称
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
      },

      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
        e: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 生命周期方法
  mounted() {
    document.documentElement.scrollTop = 0;
    this.form.a = this.$route.query.taxidnum;
    this.form.b = this.$route.query.entname;
    this.getParams();
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    getParams() {
      if (!sessionStorage.getItem("flow6Data")) return;
      let params = JSON.parse(sessionStorage.getItem("flow6Data"));
      this.form.a = params.a;
      this.form.b = params.b;
      this.form.c = params.c;
      this.form.d = params.d;
      this.form.e = params.e;
    },
    submitBtn() {
      this.radio = !this.radio;
    },
    // 切换密码隐藏显示
    isShow() {
      this.show = !this.show;
      this.show ? (this.password = "password") : (this.password = "text");
    },

    // 上一页
    lastStep() {
      this.$router.go(-1);
    },
    // 产品申请第1步
    async nextStep() {
      let { a, b, c, d, e } = this.form;
      let data = {
        a: a,
        b: b,
        c: c,
        d: d,
        e: e,
      };
      //  || !this.radio
      data = JSON.stringify(data);
      if (a == "" || b == "" || c == "" || d == "" || e == "")
        return this.$Message.error("请输入内容");
      sessionStorage.setItem("flow6Data", data);

      let type = localStorage.getItem("type");
      if (type == 2 || type == 3) {
        this.$router.push("/flow7");
      } else if (type == 1 || type == 4) {
        this.$router.push("/flow6");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f5f7fa;
  .f1 {
    width: 100%;
    height: 138px;
    background: #f0f1f7;
    .f1_content {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 100%;
      .goHome {
        display: flex;
        align-items: center;
        height: 25px;
        cursor: pointer;
        z-index: 9999;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #616060;
        img {
          width: 24px;
          // height: 24px;
        }
      }
      ul {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          h6 {
            font-size: 14px;
            font-weight: 400;
            color: #515151;
            margin-bottom: 5px;
            span {
              font-size: 22px;
              font-family: Britannic Bold;
              font-weight: 500;
              color: #000000;
            }
          }
          .quan {
            width: 24px;
            height: 24px;
          }
          .line {
            width: 123px;
            height: 3px;
          }
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 80px;
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      width: 1024px;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 130px;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
      .f2_form {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: -77px;
        .show {
          cursor: pointer;
          position: absolute;
          right: 15px;
          top: 0px;
          z-index: 99;
          img {
            width: 28px;
          }
        }
        .forget {
          text-decoration: underline;
          cursor: pointer;
          display: flex;
          justify-content: flex-end;
          font-size: 16px;
          color: #3f6ef2;
          margin-bottom: 10px;
        }
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 25px;
        text-align: center;
        margin-top: 10px;
        user-select: none;
        span {
          font-size: 14px;
          color: #666;
          margin-left: 7px;
        }
        img {
          width: 15px;
          height: 15px;
          cursor: pointer;
        }
        a {
          cursor: pointer;
          font-size: 14px;
          color: #3f6ef2;
        }
      }
      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        button {
          font-weight: 600;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          background-color: #24829d;
          margin-left: 30px;
          border: 0;
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 450px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
</style>
